<template>
  <view class="container">

    <view class="box-box">
      <view class="box">
        <view class="selected">
          <view clsss="selected-dot">
          </view>
        </view>
        <view
            v-if="goods.bodyJson&&goods.bodyJson.length>0"
            class="img-box" style="margin-left: 40rpx">
          <image
              mode="aspectFill"
              class="img"
              :src="$kt.file.visit(goods.bodyJson[0].value)"></image>
        </view>

        <view class="text-box">
          <view class="text text-desc">{{goods.name}}</view>

          <view
              v-if="goodsAttrGroup.attrs&&goodsAttrGroup.attrs.length>0"
              class="text">
            <view
            v-for="(item, index) in goodsAttrGroup.attrs"
            class="text-tag"
            >{{getByTextId(item.textId)}}</view>
          </view>
          <view class="text"
                style="font-weight: bold">
            <text style="font-size: 20rpx">￥</text>{{ $kt.math.evaluate(goods.price + "*" + number)}}
          </view>
        </view>

        <view class="math-box">
          <view class="math">-</view>
          <view class="math-num">{{number}}</view>
          <view class="math">+</view>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
import text from "@/uni_modules/uview-ui/libs/config/props/text";

export default {
  computed: {
    text() {
      return text
    }
  },
  props: {
    // 默认值
    goods: {
      type: Object,
      default: () => {
        return {}
      }
    },
    goodsAttrGroup: {
      type: Object,
      default: () => {
        return {}
      }
    },
    number: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      textMap: {}
    }
  },
  mounted() {
    console.log(this.goodsAttrGroup,"=====");
    this.getViewListByGoodsId(this.goods.id);
  },
  methods:{
    toGoodsDetail(item){
      uni.navigateTo({
        url: '/pages/goodsDetail/goodsDetail'
      })
    },
    getViewListByGoodsId(goodsId){
      this.$kt.request.send({
        uri: '/business-shop-web/shopGoodsTextI8n/getViewListByGoodsId',
        data: {
          goodsId
        },
        stateSuccess: (res) => {
          console.log(res.data,"-=-=")
          this.textMap = {};
          for (let i = 0; i < res.data.length; i++) {
            this.textMap[res.data[i].id] = res.data[i].text;
          }
        }
      });
    },
    getByTextId(textId,text){
      try{
        return this.textMap[textId] || text;
      }catch (e) {
        return text;
      }
    },
  }

}
</script>

<style lang="scss" scoped>

.grid-icon {
  width: 100rpx;
  height: 100rpx;
}

.grid-text {
  text-align: center;
  font-size: 28rpx;
}

.box-box{
  padding: 20rpx;
  box-sizing: border-box;
}

.box{
  position: relative;
  background-color: #FFFFFF;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  border: 1rpx solid #F0F0F0;

  .img-box{
    vertical-align: top;
    width: 160rpx;
    height: 160rpx;
    display: inline-block;
    .img{
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }
  }
  .text-box{
    position: absolute;
    top: 0;
    display: inline-block;
    width: 400rpx;
    padding-left: 20rpx;
    box-sizing: border-box;
    vertical-align: bottom;
    .text{
      font-size: 32rpx;
      margin-top: 8rpx;
      // 不换行
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .math-box{
    position: absolute;
    bottom: 20rpx;
    right: 0;
    width: 200rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    .math{
      width: 40rpx;
      height: 40rpx;
      text-align: center;
      line-height: 40rpx;
      background-color: #F0F0F0;
      border-radius: 20rpx;
    }
    .math:active{
      opacity: .7;
    }
    .math-num{
      width: 100rpx;
      height: 40rpx;
      text-align: center;
      line-height: 40rpx;
      background-color: #FFFFFF;
    }
  }
}


.selected{
  position: absolute;
  width: 20rpx;
  height: 20rpx;
  display: inline-block;
  border: 1rpx solid #666666;
  border-radius: 55%;
  top: 50%;
  transform: translateY(-50%);
  .selected-dot{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 40rpx;
    height: 40rpx;
    border: 2rpx solid #000000;
    border-radius: 20rpx;
    background-color: #000000;
  }
}

.text-tag{
  display: inline-block;
  background-color: #666666;
  color: #FFFFFF;
  font-size: 26rpx;
  padding: 4rpx 8rpx;
  border-radius: 10rpx;
  margin: 10rpx;
}
</style>